<template>
  <div>
    <el-card class="box-card">
      <template #header>
        <div class="clearfix">
          <span>
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            </el-breadcrumb></span
          >
        </div>
      </template>
      <div>
        <el-button type="danger" size="small" @click="batchDelete"
          >批量删除</el-button
        >
        <el-input
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          v-model="search_key"
          size="small"
          style="width: 250px; margin-left: 15px"
        >
        </el-input>
      </div>
      <el-table
        ref="multipleTable"
        :data="users"
        tooltip-effect="dark"
        v-loading="loading"
        :stripe="true"
        :height="maxHeight"
        style="width: 100%; top: 15px"
        @selection-change="accountSelectionChange"
      >
        <el-table-column type="selection" width="55" fixed="left">
        </el-table-column>

        <el-table-column label="电话号码" width="120" fixed="left">
          <template #default="scope"
            ><el-link type="primary" href="javascript:;">{{
              scope.row.phone
            }}</el-link></template
          >
        </el-table-column>
        <el-table-column label="姓名" width="120" show-overflow-tooltip>
          <template #default="scope">{{ scope.row.username }}</template>
        </el-table-column>
        <el-table-column label="昵称" width="120" show-overflow-tooltip>
          <template #default="scope">{{ scope.row.nickname }}</template>
        </el-table-column>
        <el-table-column label="用户类型" width="120"
          ><template #default="scope">
            <el-tag v-if="scope.row.user_type === 0" type="success"
              >超级管理员
            </el-tag>
            <el-tag v-else-if="scope.row.user_type === 1">管理员 </el-tag>
            <el-tag v-else effect="plain">普通用户 </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="email"
          label="邮箱"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="country"
          label="国家"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="city"
          label="城市"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="region"
          label="地区"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="gender"
          label="性别"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="age"
          label="年龄"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="created"
          label="注册时间"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column prop="updated" label="最近更新" show-overflow-tooltip>
        </el-table-column>

        <el-table-column label="操作" fixed="right" width="70">
          <template #default="scope">
            <!-- <el-button
              type="text"
              @click="userEdit(scope.row)"
              :disabled="
                scope.row.user_type === 0 ||
                userInfo.user_type === scope.row.user_type
              "
              >编辑</el-button
            > -->
            <el-popconfirm
              confirmButtonText="确定"
              cancelButtonText="取消"
              icon="el-icon-info"
              cancelButtonType="danger"
              iconColor="red"
              title="确定删除该账号信息吗？"
              @confirm="handleDelete(scope.row.id)"
            >
              <template #reference>
                <span
                  :class="
                    scope.row.user_type === 0 ||
                    userInfo.user_type === scope.row.user_type
                      ? ''
                      : 'delte'
                  "
                >
                  <el-button
                    type="text"
                    :disabled="
                      scope.row.user_type === 0 ||
                      userInfo.user_type === scope.row.user_type
                    "
                    >删除</el-button
                  >
                </span>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 30px">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-size="15"
          layout="total, prev, pager, next, jumper"
          :total="total"
          :disabled="loading"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
  <!-- <el-dialog
    title="编辑用户"
    v-model="editDialogVisible"
    width="30%"
    :before-close="editHandleClose"
  >
    <span>这是一段信息</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </template>
  </el-dialog> -->
</template>

<script lang="ts">
import { UserService } from "@/api/user";
import { reactive, toRefs, watch } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
export default {
  name: "AdminUsers",

  setup() {
    const handleCurrentChange = (page: number) => {
      data.page = page;
    };
    const handleDelete = (id: number) => {
      UserService.deleteUser([id]).then((res) => {
        if (res.data.code === 0) {
          ElMessage.success(res.data.message);
          list();
        } else {
          ElMessage.error(res.data.message);
        }
      });
    };
    const userEdit = (user: any) => {};
    const batchDelete = () => {
      ElMessageBox.confirm("此操作将永久删除选择的用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
      })
        .then(() => {
          UserService.deleteUser(data.select_ids).then((res) => {
            if (res.data.code === 0) {
              list();
              ElMessage({
                type: "success",
                message: "删除成功!",
              });
            } else {
              ElMessage({
                type: "error",
                message: res.data.message,
              });
            }
          });
        })
        .catch(() => {});
    };
    const accountSelectionChange = (rows: any) => {
      data.select_ids = [];
      rows.forEach((i: any) => {
        // @ts-ignore
        data.select_ids.push(i.id);
      });
    };
    const editHandleClose = () => {};
    let data = reactive({
      maxHeight: document.documentElement.clientHeight - 280,
      search_key: "",
      page: 1,
      users: [],
      total: 0,
      select_ids: [],
      userInfo: {},
      loading: false,
      handleCurrentChange: handleCurrentChange,
      handleDelete: handleDelete,
      userEdit: userEdit,
      batchDelete: batchDelete,
      accountSelectionChange: accountSelectionChange,
      editDialogVisible: false,
      editHandleClose: editHandleClose,
    });
    const list = () => {
      data.loading = true;
      UserService.adminUserList({
        page: data.page,
        search_key: data.search_key,
      }).then((res) => {
        data.loading = false;
        data.users = res.data.data.users;
        data.total = res.data.data.total;
      });
    };
    list();
    watch(
      () => data.search_key,
      (newValue, oldVlaue) => {
        data.page = 1;
        data.search_key = newValue;
        list();
      }
    );
    watch(
      () => data.page,
      (newValue, oldVlaue) => {
        list();
      }
    );
    UserService.info().then((res) => {
      if (res.data.code === 0) {
        data.userInfo = res.data.data;
      }
    });
    const getHeight = () => {
      data.maxHeight = document.documentElement.clientHeight - 280;
    };
    window.addEventListener("resize", getHeight, false);
    return {
      ...toRefs(data),
    };
  },
};
</script>

<style lang="less">
.delte {
  .el-button--text {
    color: red !important;
  }
}
</style>